var gulp = require('gulp');
// 在命令行设置为生产环境或者开发环境
//开发环境不要使用压缩，会影响找错
// windows: set NODE_ENV = development 或 production  
//（可能会有问题， 建议使用 :var environment = process.env.NODE_ENV || 'development';）
// mac  linux : export NODE_ENV = development 或 production
var environment = process.env.NODE_ENV || 'production';
//根据自己开发的实际需求自行设置， src放开发文件， dist是打包压缩后的导出目录
const folder = {
    src: "src/",
    dist: 'static/'
}
// 压缩html代码
const htmlClean = require('gulp-htmlclean');
// 图片类： 压缩PNG, JPEG, GIF and SVG
const imageMin = require('gulp-imagemin');
// uglify 不支持压缩 es6 ， 需要先使用babel降级才行 */
const uglifyJS = require('gulp-uglify')
//es6 降级到es5    请使用  "gulp-babel": "^7.0.1", 
//切记不要用 8版本， 会出现无法输出的情况
const babel = require('gulp-babel');
//去除掉 注释， console 和 debugger
const removeComments = require('gulp-strip-debug')
//less 转 css
const less = require('gulp-less');
//css3 兼容各类浏览器脚本
const postCss = require('gulp-postcss');
const autoPrefixer = require('autoprefixer');
//css代码压缩
const cleanCss = require('gulp-clean-css');
var pxtoviewport = require('postcss-px-to-viewport');

//创建服务器环境插件 支持热更新
const connect = require("gulp-connect");
gulp.task('html', function () {
    const step = gulp.src(folder.src + "html/*")
        .pipe(connect.reload())
    if (environment == 'production') {
        step.pipe(htmlClean())
    }
    step.pipe(gulp.dest(folder.dist + "html/"))
})
gulp.task('img', function () {
    gulp.src(folder.src + "images/*")
        .pipe(imageMin())
        .pipe(gulp.dest(folder.dist + "images/"))
})
gulp.task('css', function () {
    //pxtoviewport配置，viewportWidth与viewportHeight为设计稿的宽高
    //这样就可以直接使用设计稿的宽高直接开发项目而不需要自己计算一遍
    var processors = pxtoviewport({
        // viewportWidth: 375,
        // viewportHeight: 667,
        // viewportUnit: 'vw'
        viewportWidth: 750, // (Number) The width of the viewport.
        viewportHeight: 1334, // (Number) The height of the viewport.
        unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw', // (String) Expected units.
        // selectorBlackList: ['.halfpx-bottom', '.halfpx-top', '.clearfix',
        //     '.ignore', '.hairlines', /^\.van-/, /^\.gj-/, /node_modules/, /^\.gjfont/, '.driver-popover-tip', '#driver-popover-item'], // (Array) The selectors to ignore and leave as px.
        minPixelValue: 3, // (Number) Set the minimum pixel value to replace.
        mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
    });

    var step = gulp.src(folder.src + "css/*")
        .pipe(connect.reload())
        .pipe(less())
        .pipe(postCss([autoPrefixer(), processors]))
    if (environment == 'production') {
        step.pipe(cleanCss())
    }
    step.pipe(gulp.dest(folder.dist + "css/"))
})
gulp.task('js', function () {
    var step = gulp.src(folder.src + "js/*")
        .pipe(connect.reload())
        .pipe(babel({
            presets: ['es2015']
        }))
    if (environment == 'production') {
        step.pipe(removeComments())
            .pipe(uglifyJS())
    }
    step.pipe(gulp.dest(folder.dist + "js/"))
})
gulp.task('server', function () {
    //设置默认服务器接口， livereload: true 是否监视文件变化
    connect.server({
        port: 8888,
        livereload: true
    })
})
//自动刷新页面
gulp.task('watch', () => {
    gulp.watch(folder.src + "html/*", ['html']);
    gulp.watch(folder.src + "css/*", ['css']);
    gulp.watch(folder.src + "js/*", ['js'])
})
gulp.task("default", ["html", "img", "css", "js", "server", "watch"]);
// default任务一定要写，不然会报警告： Task 'default' is not in your gulpfile
// 数组中写哪一个执行哪一个任务， 从左到右执行